<template>
  <el-form :model="nodeModalForm" ref="nodeModal" label-placement="left" label-width="150px" :rules="nodeModalRules"
    size="small">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="节点名称" prop="nodeName">
          <el-input v-model.trim="nodeModalForm.nodeName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item :label="'连接源:('+node.sourceNode.name+')'" prop="source">
          <el-select v-model="nodeModalForm.source" clearable filterable class="w_100">
            <el-option v-for="item in sourceFields" :key="item.alias" :label="item.alias" :value="item.alias">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item prop="type" class="join_type">
          <el-select v-model="nodeModalForm.type" clearable filterable class="w_100">
            <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item :label="'连接源:('+node.originNode.name+')'" prop="origin">
          <el-select v-model="nodeModalForm.origin" clearable filterable class="w_100">
            <el-option v-for="item in originFields" :key="item.alias" :label="item.alias" :value="item.alias">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-table ref="joinDataRef" :data="fieldsList" border style="width: 100%" height="400" row-key="id"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" :reserve-selection="true" />
          <el-table-column align="center" type="index" width="50" label="序号" />
          <el-table-column align="center" property="COLUMN_NAME" label="字段名称">
            <template #default="scope">
              <div class="circle" :class="scope.row.join==='source'?'source_dot':'origin_dot'"></div>
              <span>{{ scope.row.COLUMN_NAME }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" property="DATA_TYPE" label="字段类型" />
          <el-table-column align="center" property="COLUMN_COMMENT" label="字段注释" />
          <el-table-column align="center" width="150" label="别名" property="alias">
            <template #default="scope">
              <span>{{ scope.row.alias }}</span>
              <!--              <el-input v-model="scope.row.alias" clearable></el-input>-->
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="nodeModal-footer">
      <span class="dialog-footer">
        <el-button plain @click="handleConfigCancel">取消</el-button>
        <el-button type="primary" @click="handleConfigConfirm">更新</el-button>
      </span>
    </div>
  </el-form>
</template>

<script>
import {
  computed,
  defineComponent,
  inject,
  nextTick,
  onMounted,
  ref,
} from "vue";
import { useEtlStore } from "../../../../../store/flowEtl";

export default defineComponent({
  name: "node-config-join",
  props: {
    node: Object,
  },
  components: {},
  setup(props, ctx) {
    const etlStore = useEtlStore();
    const sourceFields = ref([]);
    const originFields = ref([]);
    const nodeList = computed(() => etlStore.nodeList);
    const nodeConfigClose = inject("nodeConfigClose");
    const fieldsList = ref([]);
    const joinDataRef = ref();
    const nodeModalForm = ref({
      nodeName: "",
      source: "",
      type: "",
      origin: "",
      fields: [],
    });
    const typeList = ref([
      {
        label: "内连接",
        value: "INNER JOIN",
      },
      {
        label: "左连接",
        value: "LEFT JOIN",
      },
      {
        label: "右连接",
        value: "RIGHT JOIN",
      },
    ]);
    const nodeModal = ref();
    const nodeModalRules = ref({
      nodeName: {
        required: true,
        message: "请输入数据源名称",
        trigger: "blur",
      },
      rowName: {
        required: true,
        message: "请输入列名称",
        trigger: "blur",
      },
      source: {
        required: true,
        message: "请选择关联字段",
        trigger: "change",
      },
      origin: {
        required: true,
        message: "请选择关联字段",
        trigger: "change",
      },
      type: {
        required: true,
        message: "请选择关联方式",
        trigger: "change",
      },
    });
    const handleConfigCancel = () => {
      nodeConfigClose();
    };
    const nodeConfigUpdate = (node) => {
      if (!nodeModalForm.value.fields.length) {
        ElMessage.error("请选择要展示列");
        return;
      }
      let aliasArr = nodeModalForm.value.fields.map((item) => item.alias);
      if (new Set([...aliasArr]).size !== aliasArr.length) {
        ElMessage.error("请修改重复的别名");
        return;
      }
      let nodes = [...nodeList.value].map((item) => {
        if (item.id === node.id) {
          item.status = true;
          item.nodeName = node.nodeName;
          item.config.join.source = node.source;
          item.config.join.origin = node.origin;
          item.config.join.type = node.type;
          item.config.fields = node.fields;
          item.originFields = fieldsList.value;
        }
        return item;
      });
      etlStore.setNodeList(nodes);
      nodeConfigClose();
    };
    const handleConfigConfirm = () => {
      nodeModal.value.validate((valid) => {
        if (valid) {
          nodeConfigUpdate(nodeModalForm.value);
        } else {
          return false;
        }
      });
    };
    const resetForm = () => {
      nodeModalForm.value = {
        id: null,
        nodeName: "",
        source: "",
        type: "",
        origin: "",
        fields: [],
      };
      fieldsList.value = [];
      sourceFields.value = [];
      originFields.value = [];
    };
    const handleSelectionChange = (val) => {
      nodeModalForm.value.fields = [];
      nodeModalForm.value.fields = val;
    };
    onMounted(() => {
      resetForm();
      nodeModalForm.value = {
        id: props.node.id,
        nodeName: props.node.nodeName,
        source: props.node.config.join.source,
        type: props.node.config.join.type,
        origin: props.node.config.join.origin,
        fields: props.node.config.fields || [],
      };
      fieldsList.value = props.node.originFields;
      originFields.value = fieldsList.value.filter((item) => {
        return item.join === "origin";
      });
      sourceFields.value = fieldsList.value.filter((item) => {
        return item.join === "source";
      });
      fieldsList.value.forEach((item) => {
        let fieldsItem = nodeModalForm.value.fields.find(
          (field) => field.id === item.id
        );
        if (fieldsItem)
          nextTick(() => {
            joinDataRef.value.toggleRowSelection(item, true);
          });
      });
    });
    return {
      nodeList,
      nodeModalForm,
      nodeModalRules,
      nodeModal,
      sourceFields,
      originFields,
      fieldsList,
      resetForm,
      joinDataRef,
      handleConfigCancel,
      handleConfigConfirm,
      nodeConfigUpdate,
      handleSelectionChange,
      nodeConfigClose,
      typeList,
    };
  },
});
</script>

<style lang="less" scoped>
.nodeModal-footer {
  padding: var(--el-dialog-padding-primary);
  padding-top: 10px;
  text-align: right;
  box-sizing: border-box;
}

.join_type {
  :deep(.el-form-item__content) {
    margin-left: 0 !important;
  }
}

// 5F83D3 EA7D59
.circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.source_dot {
  background-color: #5f83d3;
}

.origin_dot {
  background-color: #ea7d59;
}
</style>